<template>
  <div>
    计算属性:
    <!-- 依赖变量变化之后才执行一次 执行完塞在内存里有缓存 -->
    <p>{{num}}</p>
    <p>{{num}}</p>
    <p>{{num}}</p>
    <hr/>
    函数调用:
    <p>{{sum()}}</p>
    <p>{{sum()}}</p>
    <p>{{sum()}}</p>

    <hr/>
    <p>{{revMessage}}</p>
    <p>{{revMessage}}</p>
    <p>{{revMessage}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 10,
      b: 20,
      message: 'hello world'
    }
  },
  computed: {
    num (){
      console.log('计算属性调用了')
      return this.a + this.b
    },
    // 相比于函数 优点最大的就是有缓存
    revMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    sum () {
      console.log('函数调用了')
      return this.a +this.b
    }
    
  }
}
</script>

<style>

</style>